<script setup lang="ts">
import {Delete, Edit, InfoFilled} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {deleteArticleAPI, getArticleAPI, getArticleOfKeywordAPI, deleteSubCategoryAPI} from "@/api/creation.ts";
import {formattedDate} from "@/utils/formatDate.ts";
import {ElMessage, ElNotification} from "element-plus";

const dialogVisible = ref(false)
const articleList = ref()
const keyword = ref()
const total = ref(0)
const params = reactive({
  limit: 6,
  page: 1
})

// 获取文章列表
const getArticleList = async () => {
  const res = await getArticleAPI(params)
  articleList.value = res.data.articles
  total.value = res.data.total
}

// 关键字搜索
const getArticleOfKeyword = async () => {
  const res = await getArticleOfKeywordAPI(keyword.value)
  articleList.value = res.data
  dialogVisible.value = true
}

// 删除文章
const deleteArticle = async (id) => {
  const res = await deleteArticleAPI(id)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.message
    })
  }
}

// 编辑文章
const EditArticle = () => {
  ElNotification({
    title: 'Warning',
    message: '为减缓服务器压力，暂关闭编辑接口及数据回显',
    type: 'warning',
  })
}

onMounted(() => {
  getArticleList()
})
</script>

<template>
  <el-card class="card-category">
    <div class="card-category-list column">
      <div class="card-category-list-title row">
        <el-input type="text" v-model="keyword" placeholder="请输入关键字" style="width: 300px; margin-right: 10px"/>
        <el-button type="primary" @click="getArticleOfKeyword">搜索文章</el-button>
        <el-button>重置列表</el-button>
      </div>
      <div class="card-category-list-table">
        <el-table
            border
            class="el-table-box"
            ref="multipleTableRef"
            :data="articleList"
            style="width: 100%"
        >
          <el-table-column type="index" label="#" align="center"/>
          <el-table-column prop="title" align="center" label="标题"/>
          <el-table-column align="center" label="作者">
            <template #default="{row}">
              {{ row?.author.username }}
            </template>
          </el-table-column>
          <el-table-column prop="views" align="center" label="浏览量" width="80"/>
          <el-table-column prop="diggs" align="center" label="点赞量" width="80"/>
          <el-table-column align="center" label="分类">
            <template #default="{row}">
              <el-tag>
                {{ row?.categoryId?.nickname }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="封面">
            <template #default="{row}">
              <div class="course-img">
                <el-image style="border-radius: 8px" hide-on-click-modal :src="row.cover" :preview-teleported="true"
                          :preview-src-list="[row.cover as string]"
                          alt=""/>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发布时间">
            <template #default="{row}">
              {{ formattedDate(row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="控制" width="180">
            <template #default="{row}">
              <div class="operator-btn">
                <el-button type="primary" size="default" @click="EditArticle" :icon="Edit as any" circle/>
                <el-popconfirm
                    width="200"
                    @confirm="deleteArticle(row._id)"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="InfoFilled as any"
                    icon-color="#f36b6c"
                    title="您确定删除此文章吗?"
                >
                  <template #reference>
                    <el-button type="danger" size="default" :icon="Delete as any" circle/>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.card-category {
  padding: 0 50px;

  .card-category-list {

    .card-category-list-table {
      margin-top: 20px;

      .el-table-box {
        height: calc(90vh - 140px);
      }
    }
  }
}
</style>